<script>
import BookShelfApi from "../../api/bookshelf";
import BookSearch from "../../components/book/BookSearch.vue";

export default {
  components: {
    BookSearch
  },
  inject: ["reload"],
  data() {
    return {
      myBookList: [],
      total: 0,
      pageSize: 7,
      curPage: 0,
      limit: -1,
      offset: -1,
      modelShow: false, //模态框是否显示
      modelTitle: "", //模态框标题
      searchBookList: [],
      readStatus: []
    };
  },
  methods: {
    async getBookshelfList(limit = -1, offset = -1) {
      try {
        let orderBy = "created_time";
        let sort = "DESC";
        const api = new BookShelfApi();
        let res = await api.findAll(limit, offset, orderBy, sort);
        this.myBookList = res.data;
        this.readStatus = this.myBookList.map((item) => item.readStatus);
        console.log(this.myBookList);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async getCount() {
      try {
        const api = new BookShelfApi();
        let res = await api.getCount();
        this.total = res.data.total;
        console.log(this.total);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },

    goto(page) {
      this.curPage = page;
      this.offset = (page - 1) * this.pageSize;
      this.getBookshelfList(this.limit, this.offset);
    },
    searchResult(data) {
      if (data.length > 0) {
        this.modelShow = true;
        this.modelTitle = "搜索结果";
        this.searchBookList = data;
      } else {
        this > $myMessageBox("未找到相关书籍信息");
      }
    },
    closeModel() {
      this.modelShow = false;
      this.modelTitle = "";
    },
    async addMyBookshelf(bookId) {
      try {
        let msg = "";
        const api = new BookShelfApi();
        let res1 = await api.findByBookId(bookId);
        console.log(res1);
        if (res1.data.id) {
          msg = `【${res1.data.title}】已收藏`;
        } else {
          let res2 = await api.add(bookId);
          console.log(res2);
          if (res2.code === 201 && res2.data.lastID > 0) {
            msg = res2.msg;
          }
        }
        this.$myMessageBox(msg);
        this.closeModel();
        this.reload();
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async delFromMyBookshelf(id) {
      try {
        let msg = "";
        const api = new BookShelfApi();
        let res = await api.delete(id);
        if (res.code === 204) {
          this.$myMessageBox(res.msg);
        }
        this.reload();
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async updateReadStatus(id, readStatus, index) {
      readStatus = readStatus === 0 ? 1 : 0;
      try {
        let msg = "";
        const api = new BookShelfApi();
        let res = await api.updateReadStatus(id, readStatus);
        if (res.code === 200) {
          this.readStatus[index] = readStatus;
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async updateRanking(id, ranking) {
      try {
        const api = new BookShelfApi();
        await api.updateRanking(id, ranking);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    }
  },
  async mounted() {
    this.curPage = 1;
    this.limit = this.pageSize;
    this.offset = 0;
    await this.getCount();
    await this.getBookshelfList(this.limit, this.offset);
  }
};
</script>

<template>
  <div class="bookshelf-list">
    <div class="header">
      <my-pagination
        :total="total"
        :page-size="pageSize"
        :cur-page="curPage"
        :show-info="true"
        @goto="goto"
      />
      <book-search @search-result="searchResult"></book-search>
    </div>
    <div class="block">
      <ul>
        <li v-for="(book, index) in myBookList" :key="book.id">
          <div>
            <img :src="book.pic" :alt="book.title" referrerpolicy="no-referrer" />
            <p>
              <span class="title">{{ book.title }}</span>
              <span class="author">{{ book.author }}</span>
            </p>
          </div>
          <div class="action">
            <p>
              <a href="javascript:void(0);" @click="delFromMyBookshelf(book.id)">取消收藏</a>
            </p>

            <p>
              <a
                href="javascript:void(0);"
                @click="updateReadStatus(book.id, readStatus[index], index)"
              >
                <span v-if="readStatus[index] === 0">未读</span>
                <span v-else>已读</span>
              </a>
            </p>
            <p>
              <label for="ranking">评分:{{ book.ranking }}</label>
              <input
                type="range"
                id="ranking"
                min="1"
                max="10"
                step="1"
                v-model="book.ranking"
                @change="updateRanking(book.id, book.ranking)"
              />
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div>
      <my-model title="modelTitle" @close-model="closeModel" v-if="modelShow">
        <ul>
          <li v-for="book in searchBookList" :key="book.id">
            <span>{{ book.title }}</span>
            <span>{{ book.author }}</span>
            <span>{{ book.publisher }}</span>
            <span>{{ book.pubdate }}</span>
            <button @click="addMyBookshelf(book.id)">加入书架</button>
          </li>
        </ul>
      </my-model>
    </div>
  </div>
</template>

<style scoped>
/* li {
  list-style-type: none;
  flex: auto;
  min-width: 25%;
  max-width: 25%;
  display: flex;
} */

.block ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.block li {
  list-style-type: none;
  box-sizing: border-box;
  flex: 0 1 calc(25% - 16px);
  min-width: calc(25% - 16px);
  max-width: 100%;
  background-color: rgba(92, 92, 92, 0.1);
  display: flex;
  flex-wrap: wrap;
  margin: 8px;
  padding: 16px;
  border-radius: 16px;
}

.block li:hover {
  background-color: rgba(120, 110, 255, 0.3);
}

.block li img {
  width: 120px;
  height: 165px;
}

.block li div {
  font-size: 14px;
  display: flex;
}

.block li div > p {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
}

.block li p span {
  margin-top: 5px;
}

.block div.action {
  margin-top: 15px;
  min-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

input[type="range"] {
  width: 50%;
}
</style>
